<template>
<!-- 
    仪表盘内容页签字组件
 -->
<div class="sign">
    <div class="card">
        <el-row>
            <el-col :span="8">
                <div class="icon">
                    <i style="font-size: 58px" class="el-icon-sold-out" /></div>
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="12">
                <div class="text">我借用的</div>
                <el-link class="total" type="primary" disabled>一共{{data.myBorrowedAssets}}件</el-link>
            </el-col>
        </el-row>
    </div>
    <div class="card">
        <el-row>
            <el-col :span="8">
                <div class="icon">
                    <i style="font-size: 58px" class="el-icon-s-promotion" /></div>
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="12">
                <div class="text">我使用的</div>
                <el-link class="total" type="primary" disabled>一共{{data.myUsedAssets}}件</el-link>
            </el-col>
        </el-row>
    </div>
</div>
</template>
<script>

import {
    defineComponent,
    onMounted,
    reactive,
    ref,
    toRaw
} from "vue";

export default defineComponent({
    components: {},
    props:['chartData'],
    setup(props){

        const data=reactive(props.chartData)


        return{
            data
        }
    }


})


</script>
<style>
.sign {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 30px;
}

.sign .card {
    margin: 8px 10px;
    color: aliceblue;
    display: inline-block;
    width: 45%;
    height: 257px;
    border-radius: 12px;
    background-image: linear-gradient(45deg,#77b0e8 0% 0%,#0c539e 18% 82%,#77b0e8 100% 0%);
    /* background: #409eff url(../../assets/table.png) bottom/auto no-repeat; */
    padding: 10px 10px;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 30px;
}

.card .icon {
    margin: 78px 25px;
    color: aliceblue;
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: #66b1ffc7 url(../../assets/table.png) bottom/auto no-repeat;
    padding: 10px 10px;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 30px;
}

.card .text {
    margin: 78px 0px -14px 0px;
    color: #f5f7fa;
    /* display: inline-block; */
    /* width: 80px; */
    /* height: 80px; */
    padding: 10px 10px;
    /* box-sizing: border-box; */
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

.card .total {
    padding: 10px 10px;
    font-size: 15px;
}

.sign span p:nth-child(1) {
    font-size: 12px;
}
</style>

